<template>
  <el-carousel height="480px" :interval="5000" arrow="always">
    <el-carousel-item v-for="(item,index) in bannerList" :key="index">
      <img class="bannerImg" :src="item.image" />
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import Menu from "@/service/menu-service.js"
const _menu = new Menu();

export default {
  	name: 'BannerIndex',
  	data :function() {
	    return {
	      	bannerList: {}
	    }
  	},
  	components:{
  	},
  	created(){
  		this.findBanner();
  	},
  	methods:{
  		findBanner(){
  			_menu.bannerList({}).then((res)=>{
  				this.bannerList = res.data;
  			},(errMsg)=>{
  				console.log(errMsg)
  			})
  		}
  	}
}
</script>

<style scoped>
	.el-carousel{
		z-index: 0;
	}
  .el-carousel__container{
  	height: 480px !important;
  }
  .bannerImg{
  	height: 100%;
  	width: 100%;
  }
</style>